<template>
  <div>
    <content-panel
      ref="contentRef"
      title="操作日志"
      :ops="{delete: 'logs:oplog:delete', export: 'logs:oplog:export'}"
      search-label-width="55px"
      :search-props="searchProps"
      :table-props="tableProps"
      list-api="getOperateLogs"
      get-api="geOperateLog"
      delete-api="deleteOperateLog"
      :import-and-export="{ exportUrl: '/logs/opLog/export' }"
    >
      <template #top>
        <div style="height: 200px">
          <line-chart
            ref="lineChartRef"
            lazy
            height="100%"
            :colors="['#006fff', '#ff0006']"
            :legend-names="['成功', '失败']"
            :y-max="5"
          />
        </div>
      </template>
      <template #ops>
        <el-col :span="1.5">
          <el-button
            v-has-perm="['logs:oplog:delete']"
            type="danger"
            plain
            size="small"
            @click="handleClean"
          >
            <template #icon>
              <Delete />
            </template>
            清空
          </el-button>
        </el-col>
      </template>
      <template #operate="scope">
        <el-button
          v-has-perm="['logs:oplog:query']"
          size="small"
          type="primary"
          link
          @click="handleView(scope.row,scope.index)"
        >
          <template #icon>
            <View />
          </template>
          详细
        </el-button>
      </template>
    </content-panel>

    <!-- 操作日志详细 -->
    <el-drawer
      v-model="open"
      title="操作日志详细"
    >
      <div class="request-info">
        <div class="window-dots">
          <div class="dot dot-red" />
          <div class="dot dot-yellow" />
          <div class="dot dot-green" />
        </div>

        <el-descriptions :column="1">
          <el-descriptions-item label="模块标题:">{{ form.module }}</el-descriptions-item>
          <el-descriptions-item label="业务类型:">{{ form.summary }}</el-descriptions-item>
          <el-descriptions-item label="浏览器类型:">{{ form.browser }}</el-descriptions-item>
          <el-descriptions-item label="操作系统:">{{ form.os }}</el-descriptions-item>
          <el-descriptions-item label="操作类别:">{{ form.operatorType }}</el-descriptions-item>
          <el-descriptions-item label="操作人:">{{ form.operatorUserName }}</el-descriptions-item>
          <el-descriptions-item label="请求方式:">{{ form.method }}</el-descriptions-item>
          <el-descriptions-item label="方法名称:">{{ form.methodName }}</el-descriptions-item>
          <el-descriptions-item label="请求URL:">{{ form.uri }}</el-descriptions-item>
          <el-descriptions-item label="IP地址:">{{ form.ip }}</el-descriptions-item>
          <el-descriptions-item label="操作地点:">{{ form.ipAddress }}</el-descriptions-item>
          <el-descriptions-item label="请求参数:">
            <span class="params-content">{{ form.params }}</span>
          </el-descriptions-item>
          <el-descriptions-item v-if="form.result" label="返回参数:">{{ form.result }}</el-descriptions-item>
          <el-descriptions-item label="状态:">
            {{ form.status }}
          </el-descriptions-item>
          <el-descriptions-item v-if="form.errorMsg" label="错误消息:">{{ form.errorMsg }}</el-descriptions-item>
          <el-descriptions-item label="操作时间:">{{ form.operateTime }}</el-descriptions-item>
          <el-descriptions-item label="操作用时:">{{ form.useTime }} 毫秒</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { Delete, View } from "@element-plus/icons-vue"
import moment from 'moment'

const contentRef = ref(null)
const lineChartRef = ref(null)
const open = ref(false)
const form = ref({})

const tableProps = [
  {label: '日志编号', prop: 'id'},
  {label: '系统模块', prop: 'module'},
  {label: '操作类型', prop: 'summary'},
  {label: '请求方式', prop: 'method'},
  {label: '操作人员', prop: 'operatorUserName'},
  {label: '操作地址', prop: 'ip'},
  {label: '操作地点', prop: 'ipAddress'},
  {label: '操作状态', prop: 'status'},
  {label: '操作日期', prop: 'operateTime', width: '140px'},
  {label: '操作', type: 'operate'}
]


const statusOptions = [{label: '正常', value: '正常'}, {label: '异常', value: '异常'}]
const summaryOptions = [
  {label: '其它', value: '其它'}, {label: '新增', value: '新增'}, {
    label: '修改',
    value: '修改'
  }, {label: '删除', value: '删除'},
  {label: '授权', value: '授权'}, {label: '导出', value: '导出'}, {label: '导入', value: '导入'}, {
    label: '强退',
    value: '强退'
  }, {label: '生成代码', value: '生成代码'},
  {label: '执行任务', value: '执行任务'}, {label: '清空数据', value: '清空数据'}
]


const searchProps = ref([
  {label: '系统模块', prop: 'module', type: 'input', width: 10, labelWidth: 5},
  {label: '操作人员', prop: 'operatorUserName', type: 'input', width: 10, labelWidth: 5},
  {label: '操作类型', prop: 'summary', type: 'select', options: summaryOptions, width: 11.25, labelWidth: 5},
  {label: '状态', prop: 'status', type: 'select', options: statusOptions, width: 11.25, labelWidth: 3},
  {label: '操作时间', prop: 'operateTime', type: 'date', width: 11.25, labelWidth: 5}
])


// 查看详情
const handleView = (row) => {
  open.value = true
  form.value = row
}

// 清空操作
const handleClean = () => {
  $xl.modal.confirm('是否确认清空所有操作日志数据项？').then(() => {
    $xl.apis.cleanOperateLog().then(() => {
      contentRef.value.getList()
      $xl.modal.msgSuccess('清空成功')
    })
  })
}


const getDateList = (days) => {
  return Array.from({length: days}, (_, i) => i)
      .map(day => moment().subtract(day, 'days').format('YYYY-MM-DD'))
      .reverse()
}

onMounted(() => {
  $xl.apis.getOperateLogsStatistic({
    params: {
      days: 30
    }
  }).then(res => {
    const dataMap = res.data.reduce((map, item) => {
      map[item.date] = item
      return map
    }, {})
    const dateList = getDateList(30)
    lineChartRef.value?.loadChart({
      xAxisNames: dateList.map(date => date.slice(5)),
      chartData: [
        dateList.map(date => dataMap[date]?.successCount || 0),
        dateList.map(date => dataMap[date]?.failCount || 0)
      ]
    })
  })
})
</script>


<style lang="scss" scoped>
.request-info {
  min-height: 600px;
  background-color: #1e2329;
  border-radius: 8px;
  padding: 20px;
  color: #e8e9ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.window-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-red {
  background-color: #ff5f56;
}

.dot-yellow {
  background-color: #ffbd2e;
}

.dot-green {
  background-color: #27c93f;
}

/* 自定义 el-descriptions 样式 */
:deep(.el-descriptions) {
  --el-bg-color: #2a2f36;
  --el-text-color-regular: #e8e9ea;
  --el-border-color: #3a3f4b;
}

:deep(.el-descriptions__label) {
  font-size: 18px;
  color: #49DE80 !important;
  width: 100px;
  flex-shrink: 0;
}

:deep(.el-descriptions__content) {
  font-size: 18px;
  word-break: break-word;
  flex: 1;
}

:deep(.el-descriptions__cell) {
  line-height: 36px !important;
  background-color: #1e2329 !important;
  display: flex !important;
  align-items: flex-start !important;
  padding: 12px 10px !important;
}

:deep(.el-descriptions__table) {
  margin-top: 30px !important;
  table-layout: fixed;
  width: 100%;
}

.params-content {
  display: inline;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 调整表格单元格样式 */
:deep(.el-descriptions__cell.is-bordered-content) {
  border-right: 1px solid var(--el-border-color);
}

:deep(.el-descriptions__cell.is-bordered-label) {
  border-right: 1px solid var(--el-border-color);
}
</style>
